import React, { useState } from 'react';
import { Button, Card, Col, Form, Input, message, Popconfirm, Row, Spin } from 'antd';
import { useAntdTable } from 'ahooks';
import Space from '@/components/Space';
import { GlobalFormLayout } from '@/layouts/Form';
import request from '@/utils/request';
import SlickTable from '@/components/SlickTable';
import useModal from '@/hooks/UseModal';
import ModifyPasswordModal from './ModifyPasswordModal';
import AddUserModal from './AddUserModal';
import IconLink from '@/components/IconLink';

function fetchUsers({ current, pageSize, username }) {
  return request.post('/user/page', {
    data: {
      current,
      pageSize,
      username,
    },
  });
}

function UserPage({ form, goToStep }) {
  const { getFieldDecorator, resetFields, getFieldsValue } = form;
  const { data, showModal, hideModal, visible } = useModal();
  const {
    data: data2,
    showModal: showModal2,
    hideModal: hideModal2,
    visible: visible2,
  } = useModal();
  const [loading, setLoading] = useState(false);

  const { tableProps, refresh } = useAntdTable(
    query => fetchUsers({ ...query, ...getFieldsValue() }),
    { defaultPageSize: 10 }
  );

  const handleDeleteUser = userId => {
    setLoading(true);
    request
      .post(`/user/delete?userId=${userId}`)
      .then(() => {
        message.success('删除成功');
        refresh();
      })
      .finally(() => setLoading(false));
  };

  const columns = [
    {
      title: '用户ID',
      dataIndex: 'userId',
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '操作',
      render: (_, record) => {
        return (
          <Space divider="vertical">
            <IconLink icon="container" onClick={() => goToStep(2, { record })}>
              详情
            </IconLink>
            <IconLink icon="edit" onClick={() => showModal2(record)}>
              修改密码
            </IconLink>
            <Popconfirm
              title={`确定要删除用户【${record.username}】吗`}
              onConfirm={() => handleDeleteUser(record.userId)}
            >
              <IconLink className="text-danger" icon="delete">
                删除
              </IconLink>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];

  return (
    <Card
      title="用户管理"
      className="cute"
      extra={
        <Button icon="user-add" type="primary" onClick={showModal}>
          新增用户
        </Button>
      }
    >
      <Form className="margin-bottom" {...GlobalFormLayout}>
        <Row gutter={16}>
          <Col span={6}>
            <Form.Item label="用户名">
              {getFieldDecorator('username')(<Input onPressEnter={refresh} placeholder="请输入" />)}
            </Form.Item>
          </Col>
          <Col span={6}>
            <Space>
              <Button type="primary" onClick={refresh}>
                查询
              </Button>
              <Button type="default" onClick={() => resetFields()}>
                重置
              </Button>
            </Space>
          </Col>
        </Row>
      </Form>
      <Spin spinning={loading}>
        <SlickTable rowKey="userId" columns={columns} {...tableProps} />
      </Spin>
      <AddUserModal
        data={data}
        visible={visible}
        onCancel={() => {
          hideModal();
          refresh();
        }}
      />
      <ModifyPasswordModal
        data={data2}
        visible={visible2}
        onCancel={() => {
          hideModal2();
          refresh();
        }}
      />
    </Card>
  );
}

export default Form.create()(UserPage);
